<template>
	<view class="add" v-if="loadStatus">
		<catch-form>
			<view class="header  bg-theme text-sm flex justify-center">
				<view class="box flex  justify-center align-center text-center">
					<block v-for="(item, index) in types" :key="index">
						<view class="item" :class="tabIndex == index ? 'bg-black text-white': ''"
							@tap="change_tab(index)">{{item.name}}</view>
					</block>
				</view>

			</view>

			<view class="amount bg-theme flex justify-end align-center text-price">{{amount}}</view>

			<view class="cu-list grid col-5 no-border account text-sm text-center">
				<u-grid :border="false" :col="5">
					<u-grid-item v-for="(item, index) in getFundTypes" :key="index"
						@tap="select_type(index)">
						<view class="logo round" :class="index == typeIndex ? 'bg-theme' : 'bg-gray'">
							<image :src="item.icon_image" mode="widthFix"></image>
						</view>

						<view class="name">{{item.name}}</view>
					</u-grid-item>
				</u-grid>

			</view>


			<view class="images">
				<view class="cu-list col-3 grid no-border">
					<u-grid :border="false">
						<u-grid-item v-for="(item, index) in images" :key="index">
							<view class="cu-item">
								<view class="close" @tap.stop="del_img(index)">
									<u-icon name="trash" color="red" size="30"></u-icon>
								</view>

								<image :src="item" mode="aspectFill" @tap="pre_img(index)"></image>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>


			<view class="keyboard solid-top">
				<view class="select flex align-center text-sm">
					<picker mode="date" @change="date_change" :end="endDate"
						class="flex-sub text-center solid-right text-cut">
						<view class="flex justify-center item">
							<text class="margin-right-xs">{{date}}</text>
							<u-icon name="arrow-down" :size="10"></u-icon>
						</view>
					</picker>
					<picker mode="selector" :range="myAccounts" range-key="name" @change="account_change"
						class="flex-sub text-center solid-right text-cut">
						<view class="flex justify-center item">
							<text class="margin-right-xs">{{myAccounts[accountIndex]['name']}}</text>
							<u-icon name="arrow-down" :size="10"></u-icon>
						</view>
					</picker>
					<view class="remark flex align-center item">
						<u-icon name="edit-pen" :size="14"></u-icon>
						<input type="text" value="" v-model="remark" placeholder="备注信息" />
					</view>
				</view>

				<view class="footer flex align-center align-stretch">
					<view class="numbers flex flex-sub flex-wrap">
						<view class="number" @tap="input_number(1)">1</view>
						<view class="number" @tap="input_number(2)">2</view>
						<view class="number" @tap="input_number(3)">3</view>
						<view class="number" @tap="input_number(4)">4</view>
						<view class="number" @tap="input_number(5)">5</view>
						<view class="number" @tap="input_number(6)">6</view>
						<view class="number" @tap="input_number(7)">7</view>
						<view class="number" @tap="input_number(8)">8</view>
						<view class="number" @tap="input_number(9)">9</view>
						<view class="number" @tap="input_number('.')">.</view>
						<view class="number" @tap="input_number(0)">0</view>
						<view class="number" @tap="del_number">
							<u-icon name="arrow-left" :size="14"></u-icon>
						</view>
					</view>
					<view class="right">
						<view class="camera" @tap="upload_img">
							<u-icon name="camera" :size="28"></u-icon>
						</view>
						<view class="flex-sub bg-theme submit" @tap="submit">保存</view>

					</view>

				</view>
			</view>
		</catch-form>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import AccountModel from '@/models/AccountModel.js'
	import FundsModel from '@/models/FundsModel';
	import IndexModel from '@/models/IndexModel.js'

	var now = new Date();
	var date = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();

	var that;

	export default {
		computed: {
			...mapState(['userInfo', 'accounts', 'fundTypes']),
			myAccounts() {
				const rows = []
				this.accounts.forEach(item => {
					if (item.user_id == this.userInfo.id) {
						rows.push(item)
					}
				})
				return rows
			},
			getFundTypes() {
				const type = this.types[this.tabIndex].value
				const rows = []
				this.fundTypes.forEach(item => {
					if(item.type == type) {
						rows.push(item)
					}
				})
				
				return rows
			}
		},
		data() {
			return {
				loadStatus: false,
				id: '',
				tabIndex: 0,
				disabled: false,
				types: [{
						name: '支出',
						value: 1,
						funds_type: [

						]
					},
					{
						name: '收入',
						value: 2,
						funds_type: [

						]
					}
				],
				amount: 0,
				amountStr: '0',
				accountIndex: 0,
				remark: '',
				date: date,
				endDate: date,
				typeIndex: 0,
				images: []
			}
		},
		async onLoad(options) {
			that = this;
			uni.showLoading();
			this.get_funds_type();
			if (options.id) {
				that.id = options.id ? options.id : '';
				await this.get_detail()
			}

			that.loadStatus = true;
			uni.hideLoading();
		},
		methods: {
			change_tab(index) {
				this.tabIndex = index;
				this.typeIndex = 0;
			},
			//获取帐单类型
			get_funds_type() {
				this.$nextTick(() => {
					this.fundTypes.forEach(item => {
						console.log('item', item)
						if (item.type == 1) {
							this.types[0].funds_type.push(item)
						} else {
							this.types[1].funds_type.push(item)
						}
					})
				})
				
			},
			//获取帐户
			get_account(callback) {
				AccountModel.my().then(res => {
					if (res.code == 200) {
						if (res.data.length > 0) {
							this.accounts = res.data;
							callback && callback();
						} else {
							uni.hideLoading();
							this.$base.alert('请先添加帐户', () => {
								uni.redirectTo({
									url: '/pages/account/edit?from=funds'
								})
							})
						}

					} else {
						uni.hideLoading();
						this.$base.alert(res.msg, () => {
							uni.navigateBack();
						})
					}
				})
			},
			//选择消息类型
			select_type(index) {
				this.typeIndex = index;
			},
			//选择日期
			date_change(e) {
				this.date = e.detail.value;
			},
			//选择帐户
			account_change(e) {
				this.accountIndex = e.detail.value;
			},
			//输入金额
			input_number(num) {
				if (num == '.' && this.amountStr.indexOf('.') >= 0) {
					return false;
				}
				var amount = this.amountStr += String(num);
				this.amount = parseFloat(amount).toFixed(2);
			},
			//删除金额
			del_number() {
				var amount = this.amountStr.substr(0, this.amountStr.length - 1);
				this.amountStr = amount;
				this.amount = parseFloat(amount).toFixed(2);
			},
			//上传图片
			upload_img() {
				let that = this;
				uni.chooseImage({
					count: 3 - this.images.length,
					success(res) {
						res.tempFilePaths.forEach((path) => {
							IndexModel.upload(path).then(res => {
								console.log('res', res)
								that.images.push(res.data.url)
							})
						})

					}
				})
			},
			//预览图片
			pre_img(index) {
				uni.previewImage({
					current: index,
					urls: this.images
				})
			},
			del_img(index) {
				this.images.splice(index, 1);
			},

			async get_detail() {
				const res = await FundsModel.detail(this.id)
				if (res.code == 200) {
					if (res.data.operation_type == 2) {
						that.change_tab(1);
					}

					that.amount = res.data.amount;
					that.date = res.data.date;
					const accounts = this.myAccounts
					accounts.forEach((item, index) => {
						if (item.id == res.data.account_id) {
							that.accountIndex = index;
						}
					})

					that.remark = res.data.remark;
					that.images = res.data.images;
					const fundTypes = this.getFundTypes
					fundTypes.forEach((item, index) => {
						if (item.id == res.data.funds_type_id) {
							that.typeIndex = index;
						}
					})
				} else {
					that.$base.alert(res.msg, () => {
						uni.navigateBack()
					})
				}

			},
			//提交
			submit() {
				var that = this;
				if (this.amount <= 0) {
					uni.showToast({
						title: '请输入金额'
					})
					return false;
				}

				if (this.typeIndex == -1) {
					uni.showToast({
						title: '请选择类型'
					})
					return false;
				}

				var item = this.types[this.tabIndex];
				const fundTypes = this.getFundTypes
				const accounts = this.myAccounts
				var postData = {
					id: this.id,
					operation_type: item.value,
					amount: this.amount,
					account_id: accounts[this.accountIndex]['id'],
					funds_type_id: fundTypes[this.typeIndex]['id'],
					date: this.date,
					images: this.images.toString(),
					remark: this.remark
				}


				that.disabled = true;
				uni.showLoading({
					mask: true
				})

				FundsModel.add(postData).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						var pages = getCurrentPages();
						var page = pages[pages.length - 2];
						if (page.route == 'pages/index/index') {
							page.$vm.search();
						} else {
							page.$vm.get_detail();
						}

						uni.showToast({
							title: res.msg,
							success() {
								setTimeout(() => {
									uni.navigateBack();
								}, 500)
							}
						})


					} else {
						that.disabled = false;
						that.$base.alert(res.msg)
					}
				})

			}
		}
	}
</script>

<style scoped lang="less">
	.add {
		padding-bottom: 600upx;

		.header {
			height: 80upx;

			.box {

				width: 500upx;
				overflow: hidden;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				.item {
					flex: 1;
					height: 60upx;
					display: flex;
					box-sizing: border-box;
					align-items: center;
					justify-content: center;
					border: 1rpx solid #000;
					border-radius: 0 10rpx 10rpx 0;

					&:nth-child(1) {
						border-radius: 10rpx 0 0 10rpx;
					}
				}
			}
		}

		.amount {
			height: 80upx;
			padding-right: 20upx;
			border-top: 1upx solid #eee;
		}

		.account {
			padding-top: 20rpx;

			.cu-item {
				margin-top: 20upx;
			}

			.logo {
				width: 60upx;
				height: 60upx;
				padding: 20upx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;
			}

			image {
				width: 60upx;
				height: 60upx;
			}

			.name {
				margin-bottom: 40rpx;
			}
		}

		.images {
			.cu-item {
				position: relative;

				image {
					width: 200rpx;
					height: 200rpx;
				}

				.close {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 5;
					width: 50upx;
					height: 50upx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}


		.keyboard {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			background: #fff;
			z-index: 9;
			border-top: 1upx solid #FFD100;

			view {
				box-sizing: border-box;
			}

			.select {
				height: 80upx;

				.remark {
					width: 350upx;
					padding: 0 10rpx;
				}

				.item {
					height: 80upx;
					border-right: 1rpx solid #eee;
					display: flex;
					align-items: center;
				}
			}

			.footer {

				border-top: 1upx solid #eee;
				align-items: stretch;

				.numbers {
					border-right: 1upx solid #eee;

					.number {
						width: 200upx;
						height: 80upx;
						border-left: 1upx solid #eee;
						border-bottom: 1upx solid #eee;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.right {
					width: 146rpx;
					display: flex;
					flex-direction: column;

					.camera {
						height: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}



				.submit {
					width: 146upx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>